<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>商品报价</title>
    <meta name="keywords" content="知果汇"/>
    <meta name="description" content="知果汇"/>
    <link rel="SHORTCUT ICON" href="images/favicon.ico"/>
    <style type="text/css">
        html, body {
            width: 550px;
            height: 270px;
            margin: 0;
            padding: 0;
        }

        p {
            margin: 0;
        }

        .fl {
            float: left;
        }

        .content {
            padding: 20px;
            width: 520px;
        }

        .content p, .content span {
            display: inline-block;
        }

        .center {
            text-align: center;
            font-size: 20px;
            color: #313131;
            width: 100%;
        }

        .formula {
            margin: 15px 0 15px 100px;
            font-size: 24px;
            height: 54px;
        }

        .formula span {
            height: 54px;
            line-height: 54px;
        }

        .number {
            width: 100px;
            height: 50px;
            line-height: 50px;
            padding-left: 30px;
            font-size: 24px;
            margin: 0 5px;
        }

        .prices, .prices01 {
            color: #FF4900;
        }

        .tips {
            font-size: 13px;
            color: #313131;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .texts {
            font-size: 14px;
            color: #666666;
            padding-left: 25px;
        }

        .pl0 {
            padding-left: 0 !important;
        }

        .texts span {
            display: inline-block;
            width: 25px;
            color: #3377C1;
        }

        /*移除上下箭头*/
        input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        input[type="number"] {
            -moz-appearance: textfield;
        }
    </style>
</head>
<body>
<div class="content">
    <p class="center">请输入您的报价！</p>
    <div class="formula"><span class="init"></span>+<input class="number" type="number"/>=<span class="prices"></span>
    </div>
    <p class="tips">您的最终报价为<span class="prices"></span>,请确认提交(输入价格必须为整数，不能包含负数和小数)
    </p>
    <input type="hidden" id="store">
    <input type="hidden" id="user_uid">
    <input type="hidden" id="id">
    <p class="texts pl0"><span>注：</span>1.提交后，请您耐心等待卖家确认；</p>
    <p class="texts">2.若商家采用您的报价，您可以继续支付交易金额；</p>
    <p class="texts">3.若商家没有采用您的报价，订单将会取消。</p>
</div>
</body>
<script src="_JS_/jquery-1.8.3.min.js"></script>
<script src="_JS_/jquery.base64.js"></script>
<script src="_JS_/jquery.cookie.js"></script>
<script src="_P_/layer/layer.js"></script>
<script src="_JS_/common.js"></script>
<script type="text/javascript">
    $(function () {
        var url = window.location.href;
        var userinfo = $.cookie('userinfo');
        id = url.split("=")[1];
        $('#id').val(id);
        store = $('.prices').eq(0).text();
        if (userinfo != null) {
            var user_login = $.base64.decode(userinfo).split(",");
            user_uid = user_login[0];
            $('#user_uid').val(user_uid);
            $.ajax({
                type: 'GET',
                url: "{:url('api/trading/quote')}",
                dataType: 'jsonp',
                jsonp: 'callback',
                data: {id: id, 'uid': user_uid},
                success: function (msg) {
                    if (msg.code == 200) {
                        $('.init').text(msg.data.store);
                        $('.prices').text(msg.data.store + '元');
                        $('#store').val(msg.data.store);
                    }
                }
            })
        }
    });
    $(document).ready(function () {
        /*计算总价*/
        $('.number').keyup(function () {
            var initVal = $('.init').text();
            var value = $(this).val();
            var newval;
            if (value.length > 5) {
                newval = value.slice(0, 5);
            } else {
                newval = value;
            }
           $(this).val(newval);
            var price01 = Number(initVal);
            var price02 = Number(newval);
            var total = price01 + price02;
            $('.prices').text(total + '元');
            $('#store').val(total);
        });
    });
</script>
</html>
